<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>O'My Friends</title>
<link href="./css/main.css" rel="stylesheet" type="text/css"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript" src="./javascript/applet.js"></script>
<script type="text/javascript" src="./javascript/util.js"></script>
<script type="text/javascript">
/* <![CDATA[ */ 
var isAppletLoaded = false;
var isDataLoaded = true;
var threshold = 0;
$(document).ready(function(){

    $('#slider').slider({

        slide: function(event,ui){
            threshold = ui.value;
			drawGraph();
        }
    });

    shimIFrame();
    $('#loading-box').hide();
 

    $(window).resize(function(){
            
    }); 

    [##_AJAX_FUNCTION_##]

    var dWidth = 320;
    var dHeight = 400;
    
    $('#friend-container').dialog({ 
        autoOpen: false,
        width: dWidth, 
        height: dHeight,
        position: [300, 300],
        open: function(event, ui){
            $('#shimmer')
                .css('left', 300)
                .css('top' , 300)
                .width(dWidth+8)
                .height(dHeight+8)
                .show();
        },
        drag: function(event, ui){
            $('#shimmer')
                .css('left', ui.position.left)
                .css('top', ui.position.top)
        },
        resize: function(event, ui){
            $('#shimmer')
                .css('left', ui.position.left)
                .css('top' , ui.position.top)
                .width(ui.size.width+8)
                .height(ui.size.height+8);
        },
        close: function(event, ui){
            $('#shimmer').hide();
        }
      });


    //Button Event Handlers
    $('#refresh-image').click(drawGraph);
    $('#remove_zero_score').change(drawGraph);
    $('#show_friend_table').click(function(){
        $('#friend-container').dialog("open");
    });

});

function drawGraph(){

    if(isAppletLoaded && isDataLoaded){

        var obj = document.getElementById('friendsNet');
        
        if (obj != null) {
            obj.setMaxDistance(maxDistance);
            obj.clearGraph();
    
            var maxValue = 0;
            var friends = $('table.rankTable');
            $('tr', friends).each(function(index){
                if (index != 0) {
                    var cols = $(this).children();
                    
                    if (index == 1) {
                        maxValue = cols.eq(2).text();
						$('#slider').slider("max", maxValue);
                    }
                    fId = $(cols.eq(1)).attr('id');
                    name = cols.eq(1).text();
                    score = cols.eq(2).text();
    
//                    if(score >= threshold || !$('#remove_zero_score').attr("checked")){
                    if(score >= threshold){
                        obj.addFriend(fId, name, getDistance(score, maxValue));
                    }
    
                }
            });
        }
    }
}

function getFriendsAJAX(){
    $('#loading-box')
        .width(400)
        .height(300)
        .css('position', 'absolute')
        .css('top', 150)
        .css('left', 200)
        .css('z-index', 1000)
        .css('background-image', 'url("./images/ajax-loader.gif")')
        .css('background-position', 'center center')
        .css('background-repeat', 'no-repeat')
        .css('background-color', 'white')
        .css('line-height', '350px')
        .css('text-align', 'center')
        .show();

    $('#shimmer')
        .width(400)
        .height(300)
        .css('position', 'absolute')
        .css('left', 200)
        .css('top', 150)
        .show();
       
    $.getJSON('/o-my-friends/lib/getFriendsAJAX.php?[##_SESSION_STRING_##]', null, function(data){
        

        
        $('#shimmer').hide();
        $('#loading-box').hide();
        
        //Build Friend Table
        buildFriendTable(data);
        
        onDataLoaded();
    
    });
}

function buildFriendTable(data){
    var applet = $('#friendsNet')[0];
//  var applet = document.getElementById('friendsNet');
    var maxValue = 0;
    var tbody = $('table.rankTable tbody');
    $(data).each(function(item, value){
        tbody.append("<tr>" + 
                          "<td>"+ eval(item + 1) +"</td>" + 
                          "<td id='"+ value.fId +"'><a target='_blank' href='[##_MY_LINK_URL_##]and=" + value.fId + "'>" + value.name +"</td>" + 
                          "<td>" + value.score + "</td>" +
                    "</tr>");
    });
}

function onAppletLoaded(){
    trace("onAppletLoaded");
    isAppletLoaded = true;
    drawGraph();
}

function onDataLoaded(){
    trace("onDataLoaded");
    isDataLoaded = true;
    drawGraph();
}

function onAJAXCallReturn(){
    isDataLoaded = true;
        drawGraph();
}

function linkToFriendshipPage(id){
    trace("linkToFriendshipPage with "+id);
    window.location.href = $('#'+id + ' a').attr('href'); 
}


/* ]]> */
</script>
</head>
<body>
    [##_FACEBOOK_ASYNC_LOADING_CODE_##]
    <div id="header-area">
        <h1 class="app_title">O'My Friends</h1>
        <div id="button-container" class="login-button">
            [##_LOGINOUT_BUTTON_##]
            [##_REFRESH_BUTTON_##]
        </div>

    </div>
    <div id="content-wrapper">
        <div id="graph-area">
            [##_GRAPH_APPLET_##]
        </div>
        <div id="content-area">
            <div id="friend-container" title="Friends List">
                <table class='rankTable'>
                    <thead>
                        <tr>
                            <th>Rank</th>
                            <th>Name</th>
                            <th>Points</th>
                        </tr>
                    </thead>
                    <tbody>[##_RANKING_LIST_##]</tbody>
                </table>
            </div>
        </div>
    </div>
    <div id="loading-box" style="display:none;">
        Loading friends data. Please wait.
    </div>
    <div id="message-box"></div>
</body>
</html>